<template>
  <div class="app">
    <div class="bgView">
      <div class="bottomView">
        <div class="ceshitt">
          <div class="imgDiv" @click="selectClick(item, index)" v-for="(item, index) in imgList" :key="index">
            <span>
              {{ item.name }}
            </span>
            <div :class="['selectBox', item.state ? 'selectClass' : '']">
              <span v-if="item.state">{{ item.serial }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      imgList: [
        { name: '平台一', state: false, serial: '' },
        { name: '平台二', state: false, serial: '' },
        { name: '平台三', state: false, serial: '' },
        { name: '平台四', state: false, serial: '' },
        { name: '平台五', state: false, serial: '' },
        { name: '平台六', state: false, serial: '' },
        // 添加更多图片对象
      ],
      initial: 0, //设置选中初始值 作为最终选择几个依据
    }
  },
  computed: {},
  watch: {},
  methods: {
    selectClick(item,val){
      // item = 点击事件带过来整条参数
      // val = 所点击的下标
      // 逻辑 1、在原始数组中对象中增加2个值 --- 选中状态 默认false  选中值 默认'',
      // 判断所点击的项的选中状态
      if(!item.state){ //开始未选中
        //点击选中,改变当前项的选中状态 设置为true 
        item.state = true
        // 选中初始值 +1
        this.initial++
        // 当前项赋值=设置初始值
        item.serial = this.initial
      }else { //选中下点击取消（状态值为true时点击）
        // 改变当前项选中状态为false
        item.state = false
        // 设置一个空值 用于接受最终几个值选中 用于更改选中初始值
        let xuanzhong = 0
        // 跑循环去自减
        this.imgList.forEach((items,index) => {
          // items = 循环所需要的每一项
          if(items.serial>item.serial){ //判断 当前点击的选中值 和 数组中所有选中值做对比
            // 数组中的选中值 大于 当前选中值 数组中大于的值自减1
            items.serial--
          }
          if(items.state){//判断数组选中状态用于统计
            // 有选中则 设置控制自+1
            xuanzhong ++
          }
        })
        // 给选中初始值 赋值
        this.initial=xuanzhong
        // 当前选中值清空
        item.serial = ''
      }
    },
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
}
</script>
<style scoped lang="less">
.ceshitt {
  display: flex;
  width: 100%;
  height: 220px;
  flex-wrap: wrap;
  /* justify-content: space-between; */
}

.imgDiv {
  width: 30%;
  position: relative;
  margin-right: 10px;
  background-color: pink;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.selectBox {
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  text-align: center;
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 100;
  color: #fff;
  border: 1px solid cyan;
}
.selectClass {
  background-color: #4cc25b;
}
</style>
